<!--
 * @Author: liuyonghu liuyonghu
 * @Date: 2024-11-21 10:34:51
 * @LastEditors: liuyonghu liuyonghu
 * @LastEditTime: 2024-11-21 10:45:41
 * @FilePath: /demo/object-freeze.html
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.5.13/dist/vue.global.min.js"></script>
</head>

<body>
    <script>
        'use strict'

        function deepFreeze(object) {
            // 获取对象的属性名
            const propNames = Reflect.ownKeys(object);

            // 冻结自身前先冻结属性
            for (const name of propNames) {
                const value = object[name];

                if ((value && typeof value === "object") || typeof value === "function") {
                    deepFreeze(value);
                }
            }

            return Object.freeze(object);
        }

        const obj = {
            name: 'liuyonghu',
            age: 18,
            sex: 'man',
            subObj: {
                hobby: 'football'
            }
        }

        // Object.freeze(obj)
        deepFreeze(obj)

        const objProxy = new Proxy(obj, {
            set(target, key, value) {
                console.log('set', target, key, value)
                return Reflect.set(target, key, value)
            }
        })

        const objReactor = Vue.reactive(obj);

        Vue.watchEffect(() => {
            console.log('watchEffect', objReactor)
        })
        // objProxy.subObj.hobby = 'liuyonghu1'
        objReactor.subObj.hobby = 'liuyonghu1';

    </script>
</body>

</html>